<template>
  <div>
<!--    <div class="loading-wrapper" v-show="showLoading">-->
<!--      <Loading1></Loading1>-->
<!--    </div>-->
    <div class="login-wrapper" v-show="!showLoading">
      <img :src="imgUrl" alt="" width="100%" height="100%">
      <div class="login_box">
        <el-form :model="loginForm" :rules="login_rules" ref="loginForm" >
          <el-row style="padding: 20px">
            <p style="font-size: 20px;color: white">机 房 信 息 管 理 系 统</p>
          </el-row>
          <el-row type="flex" justify="center">
            <el-form-item prop="username" style="width: 70%;">
              <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="用户名"
                        v-on:keyup.enter.native="login"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex" justify="center">
            <el-form-item prop="password" style="width: 70%">
              <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="loginForm.password" show-password
                        v-on:keyup.enter.native="login"></el-input>
            </el-form-item>
          </el-row>

          <el-row type="flex" justify="center" style="margin:20px 0 40px 0; ">
            <el-col :span="6" style="margin-right: 10px">
              <el-button type="primary" @click="login">点击登录</el-button>
            </el-col>
            <el-col :span="6" style="margin-left: 10px">
              <el-button type="info" @click="reset">点击重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>
  </div>

</template>

<script>
  import Loading1 from '~/components/loading1.vue'
  import md5 from 'js-md5'
  export default {
    name: "login",
    layout: 'login_layout',
    components: {Loading1},
    // 渲染前就会执行
    async asyncData({$axios}) {

      // return {title:res.data.title}
    },
    mounted() {
      let bgImg = new Image()
      bgImg.src = this.imgUrl // 获取背景图片的url
      bgImg.onerror = () => {
        console.log('img onerror')
      }
      bgImg.onload = () => { // 等背景图片加载成功后 去除loading
        this.showLoading = false
      }
    },
    data() {
      return {
        showLoading: true,
        imgUrl: require('../assets/images/bg.jpg'),  // 背景图片地址
        loginForm: {
          username: '',
          password: '',
        },
        login_rules: {
          username: [{required: true, message: '请输入用户名', trigger: 'blur'},],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}, {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      reset() {
        this.$refs.loginForm.resetFields()
      },
      login() {

        this.$refs.loginForm.validate(

          async valid => {
            if (!valid) return this.$message.error('请输入用户名密码');
            const loading = this.$loading({
              lock: true,
              text: '正在登录',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            try {
              let form = JSON.parse(JSON.stringify(this.loginForm))
              form.password = md5(md5(form.password)+'liu008')
              //console.log(this.loginForm.password)
              const res = await this.$axios.post('/api/login', form);
              // if(res.status == 402) return this.$message.error(res.data.message)
               if(res.status == 250) {
                 this.$message.error(res.data.message)
                  loading.close()
                 return
               }
              if (res.status !== 200 ) {
                return this.$message({
                  showClose: true,
                  message: (res.meta.msg),
                  type: 'error'
                })
              }

              this.$cookies.set('user',{err:0,msg:'登录成功',token:res.data.result.token,data:res.data,rank:res.data.result.rank})//写入cookie
              this.$store.commit('user/M_UPDATE_USER',{err:0,msg:'登录成功',token:res.data.result.token,data:res.data,rank:res.data.result.rank})//写入vuex

              loading.close()
              this.$message.success('登录成功')
              // window.sessionStorage.setItem('token', res.data.token)
              // window.sessionStorage.setItem('name', res.data.name)
              // window.sessionStorage.setItem('id', res.data.id)

              // if(!this.$router.query.path || /login/.test(this.$router.query.path ) ){
              //   this.$router.push('/index')
              // }else{
              //   this.$router.replace(this.$router.query.path)
              // }
              this.$router.push('/home')
            } catch (e) {
              console.log(e)
              loading.close()
              this.$message.error('连接服务器失败')
            }
          }
        )
      },
    },
  }
</script>

<style scoped>
  .loading-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }

  .login_c {
    /*background-image: url(~/static/bg.jpg);*/
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    height: 100%;
  }

  .login_box {

    width: 400px;
    /*height: 300px;*/
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    background-color: rgba(12, 39, 125, 0.5);

  }

  .btns {
    /*display: flex;*/
    /*margin-left: 26%;*/
  }
</style>
